<template>
    <view class="index">
        <!-- #ifdef H5 -->
        <download-nav v-if="isShowDownload"></download-nav>
        <!-- #endif -->
        <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="enable">
            <u-navbar
				title="金竹兑换"
				titleColor="#FFF"
                :border-bottom="false"
                :is-fixed="false"
                custom-class="nav-bg"
				:background="{backgroundImage: 'linear-gradient(90deg,  #569496 0%, #366667 100%)'}"
				back-icon-color="#FFF"
            > 
            </u-navbar>
        </u-sticky>
		
		<view class="card-box">
			<view class="card1 row-between">
				<view class="left">到账方式</view>
				<view class="right row">
					<image src="../../static/images/wx_change.png" />
					微信零钱
				</view>
			</view>
			<view class="card2">
				<view class="title">现金兑换</view>
				<view class="input-box row">
					<input class="flex1" type="number" placeholder="请输入兑现根数" placeholder-style="color:#999" v-model="bambooNum" />
					<view class="exchange-tit">兑换¥{{exchangeMoney}}元</view>
				</view>
				<view class="desc">可兑现金竹{{widthDrawConfig.golden_bamboo}}根({{widthDrawConfig.poundage_percent}}根金竹子=¥0.1)</view>
			</view>
			<view class="withdraw-btn" @tap="handleWithdraw">确认提现</view>
		</view>

        <!-- 无网络提示 -->
        <u-no-network z-index="1200" @retry="handleRetry"></u-no-network>
    </view>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from 'vuex'
import { getHome, getMenu, getBestList, getBambooRank, getSeckillTime, getSeckillGoods, getGoodsList } from '@/api/store'
import { loadingType } from '@/utils/type'
import { loadingFun, menuJump, arraySlice, setTabbar, getRect, trottle } from '@/utils/tools'
import { toLogin } from '@/utils/login'
import Cache from '@/utils/cache'
import { getConfig, userShare, getRegisterCoupon } from '@/api/app'
	import {
		applyWithdraw,
		getWithdrawConfig
	} from "@/api/user";


const app = getApp()
export default {
    data() {
        return {
			bambooNum: '',
			widthDrawConfig: {},
			
            scrollTop: 0,
            navSwiperH: 374,
            logo: '',
            navHeight: 0,
            currentSwiper: 0,
            page: 1,
            status: loadingType.LOADING,
			bambooRankPage: 1,
			bambooRankStatus: loadingType.LOADING,
            remainTime: '',
            navBg: 0,
            navList: [],
            news: [],
            seckill: {},
            seckillGoods: [],
            hotGoods: [],
            newGoods: [],
            activityArea: [],
            showCoupop: false,
            couponPopList: [],
            coupon: [],
            isDischarge: true,
            enable: true,
            isShowDownload: false,
            showPrivacyPopup: false, //微信用户隐私协议
			tabActive: 0,
			tabList: [
				{
					name: '玉竹兑换',
					type: 1,
				},
				{
					name: '百亿补贴',
					type: 2,
				}
			],
			bambooRankList: [], // 玉竹排行榜
			seckilId: "",
			seckillTime: [], // 秒杀时间段
			seckillPage: 1, 
			seckillStatus: loadingType.LOADING,
			goodsList: [],
			keyword: "",
			goodsPage: 1,
			goodsStatus:  loadingType.LOADING,
			priceSort: "desc", // 销量排序:desc-降序；asc-升序
			saleSort: "desc",	// 价格排序:desc-降序；asc-升序
        }
    },
    async onLoad(options) {
		console.log('options---', options)
		
		this.getWithdrawConfigFun()
		
        // #ifdef MP-WEIXIN
        if (wx.getPrivacySetting) {
            wx.getPrivacySetting({
                success: (res) => {
                    console.log(res, '------') // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
                    if (res.needAuthorization) {
                        // 需要弹出隐私协议
                        setTimeout(() => {
                            uni.hideTabBar()
                        }, 100)
                        this.showPrivacyPopup = true
                    } else {
                        uni.showTabBar()
                    }
                },
                fail: (err) => {
                    uni.showTabBar()
                    console.log(err)
                }
            })
        } else {
            uni.showTabBar()
        }

        // #endif

        this.headerAction = wx.createAnimation({
            delay: 0,
            duration: 100,
            timingFunction: 'ease-in-out'
        })
        this.onPageScroll = trottle(this.onPageScroll, 500, this)
        // setTabbar()
        this.navHeight = app.globalData.navHeight
        this.isDischarge = false
        console.log(this.appConfig)
        // #ifdef H5
        if (options && options.isapp == 1) {
            this.isShowDownload = true
        }
        // #endif
    },
    async onShow() {
        // this.$nextTick(function () {
        //     getRect('.index').then((res) => {
        //         if (res.top == 0) {
        //             this.navBg = 0
        //         }
        //     })
        // })

        // #ifdef H5
        this.enable = true
        // #endif
    },
    onHide() {
        // #ifdef H5
        this.enable = false
        // #endif
    },
    onReachBottom() {
        
    },
    onPullDownRefresh() {
    
    },
    onShareAppMessage() {
        console.log(this.inviteCode)
        const shareInfo = Cache.get('shareInfo')
        return {
            title: shareInfo.mnp_share_title,
            path: 'pages/index/index?invite_code=' + this.inviteCode,
            imageUrl: shareInfo.mnp_share_image
        }
    },
    onPageScroll(e) {
        const top = uni.upx2px(100)
        const { scrollTop } = e
        if (!this.enable) return
        let percent = scrollTop / top
        this.navBg = percent > 1 ? 1 : percent
        this.scrollTop = scrollTop
    },
    destroyed() {
        this.isDischarge = true
    },
    methods: {
        ...mapMutations(['SETCONFIG']),
        ...mapActions(['getUser']),
        // 网络重试刷新网络请求（解决在ios中首次进入时需要授权蜂窝加载空白页面问题
        async handleRetry() {
            console.log('网络重试刷')
            try {
                const { code, data } = await getConfig()
                if (code == 1) {
                    this.SETCONFIG(data)
                    // setTabbar()
                }
            } catch (e) {
                uni.showTabBar()
            }
            this.getShareInfo()
            this.getUser()
        },
		getWithdrawConfigFun() {
			getWithdrawConfig().then(res => {
				if (res.code == 1) {
					this.widthDrawConfig = res.data
					console.log('this.widthDrawConfig ', this.widthDrawConfig)
				}
			});
		},
		handleWithdraw(){
			if(this.bambooNum*1 <= 0){
				 this.$toast({ title: "请输入兑换根数" });
				 return;
			}
			
			let params = {
				type: 2,
			    num: this.bambooNum*1, // 提现使用金竹数量
				remark: ''
			}
			console.log('params--', params)
			applyWithdraw(params).then(res => {
				if (res.code == 1) {
					 this.$toast({ title: "提现申请成功" }, {tab: 3});
				}
			});
		},
		onTabChange(active){
			console.log('active', active)
			this.tabActive = active;
		},
        async getShareInfo() {
            const { code, data } = await userShare()
            if (code == 1) {
                Cache.set('shareInfo', data)
            }
        },

        async tapMenu(item) {
            if (!this.isLogin) return toLogin()
            menuJump(item)
        },
    },
    computed: {
        ...mapGetters(['cartNum', 'inviteCode', 'appConfig']),
        navBackground() {
            return this.seting.top_bg_image
                ? {
                      'background-image': `url(${this.seting.top_bg_image})`
                  }
                : {}
        },
		exchangeMoney() {
			// 输入的根数  *   (0.1 /配置里获取的poundage_percent)
			return (this.bambooNum * (0.1/this.widthDrawConfig.poundage_percent)).toFixed(2);
		},
        showLogo() {
            return this.seting.logo
        },
        navSearch() {
            if (this.showLogo === 0) return true

            return this.navBg < 1 ? false : true
        },
        seting() {
            const { index_setting } = this.appConfig
            return index_setting
        },
		navType() {
			return this.tabList[this.tabActive].type
		}
    }
}
</script>

<style lang="scss" scoped>
page{
	min-height: 100vh;
	background: #F5F5F5;
}
.nav-bg{
	
}
.card-box{
	margin: 20rpx;
	.card1{
		padding: 30rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		.left{
			font-size: 32rpx;
			color: #333333;
			line-height: 46rpx;
		}
		.right{
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}
	}
	.card2{
		padding: 30rpx 30rpx 22rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		.title{
			font-size: 32rpx;
			color: #333333;
			line-height: 46rpx;
			margin-bottom: 10rpx;
		}
		.input-box{
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			input{
				
			}
			.exchange-tit{
				margin-left: 10rpx;
			}
		}
		.desc{
			padding-top: 18rpx;
			border-top: 1rpx solid #F5F5F5;
			margin-top: 14rpx;
			font-size: 24rpx;
			color: #999999;
			line-height: 34rpx;
		}
	}
	.withdraw-btn{
		margin: 40rpx auto 20rpx;
		width: 650rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: linear-gradient( 90deg,  #79C5C6 0%,  #4B9FA0 100%);
		border-radius: 588rpx 588rpx 588rpx 588rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
	}
}

.index {
    .live-play {
        position: fixed;
        z-index: 999;
        bottom: 200rpx;
        right: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80rpx;
        height: 80rpx;
        border: $-solid-border;
        border-radius: 50%;
        font-size: 32rpx;
        background-color: #ffffff;

        &__icon {
            animation: scale 0.5s infinite;
        }

        @keyframes scale {
            from {
                top: 0px;
                transform: scale(1);
            }
            to {
                transform: scale(1.2);
            }
        }
    }

    background-size: 100% auto;

    .logo-wrap {
        position: absolute;

        .logo {
            width: auto;
            height: 52rpx;
        }
    }

    .header {
        .navigation-bar {
            padding-top: var(--status-bar-height);
            box-sizing: border-box;
        }
    }

    .contain {
        .main {
            position: relative;
            z-index: 9;
            padding: 0 20rpx;

            .nav {
                position: relative;
                border-radius: 14rpx;

                .nav-item {
                    width: 20%;
                    margin-top: 30rpx;

                    .nav-icon {
                        width: 82rpx;
                        height: 82rpx;
                        margin-bottom: 15rpx;
                    }
                }

                .dots {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: 20rpx;
                    display: flex;

                    .dot {
                        width: 10rpx;
                        height: 6rpx;
                        border-radius: 6rpx;
                        margin-right: 10rpx;
                        background-color: rgba(255, 44, 60, 0.4);

                        &.active {
                            width: 20rpx;
                            background-color: $-color-primary;
                        }
                    }
                }
            }
			
			.menu-box{
				background: url() no-repeat;
				// width: 746rpx;
				height: 252rpx;
				background-size: 100% 100%;
				padding: 24rpx 24rpx;
				box-sizing: border-box;
				.menu-item{
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 34rpx;
					image{
						width: 92rpx;
						height: 92rpx;
						margin-bottom: 20rpx;
					}
				}
			}
			
			.invite-box{
				margin: 14rpx auto 50rpx;
				image{
					width: 710rpx;
					height: 208rpx;
				}
			}

			.seckill-box{
				display: flex;
				justify-content: space-between;
				align-items: stretch;
				.left{
					width: 350rpx;
					border-radius: 10rpx;
					padding: 20rpx 14rpx 12rpx;
					background: url() no-repeat;
					.hd{
						margin-bottom: 16rpx;
						font-size: 30rpx;
						color: #366667;
						line-height: 36rpx;
						font-weight: bold;
						image{
							width: 15rpx;
							height: 22rpx;
						}
					}
					.bd{
						.goods-item{
							position: relative;
							width: 324rpx;
							height: 222rpx;
							margin-bottom: 14rpx;
							border-radius: 16rpx;
							&:last-child{
								margin-bottom: 0;
							}
							.goods-img{
								width: 100%;
								height: 100%;
								border-radius: 16rpx;
							}
							.rank-img{
								position: absolute;
								left: 0;
								top: 0;
								width: 126rpx;
								height: 38rpx;
							}
							.exchange-btn{
								position: absolute;
								right: 10rpx;
								top: 12rpx;
								padding: 8rpx 14rpx;
								background: rgba(255,194,51,0.78);
								border-radius: 16rpx 16rpx 16rpx 16rpx;
								color: #FFFFFF;
								line-height: 28rpx;
							}
							.desc-box{
								width: 100%;
								position: absolute;
								left: 0;
								bottom: 0;
								padding: 16rpx 26rpx;
								background: rgba(0,0,0,0.72);
								border-radius: 0rpx 0rpx 16rpx 16rpx;
								font-size: 20rpx;
								color: #FFFFFF;
							}
						}
					}
				}
				.right{
					width: 350rpx;
					border-radius: 10rpx;
					padding: 20rpx 14rpx 12rpx;
					background: url() no-repeat;
					.hd{
						font-weight: 400;
						font-size: 28rpx;
						line-height: 36rpx;
						font-weight: bold;
						margin-bottom: 16rpx;
						.countdown-box{
							.item{
								padding: 6rpx;
								background: #FF7272;
								border-radius: 6rpx;
								font-weight: 700;
								font-size: 20rpx;
								color: #FFFFFF;
							}
							text{
								margin: 0 4rpx;
							}
						}
					}
					.bd{
						.goods-img{
							width: 310rpx;
							height: 316rpx;
							border-radius: 16rpx;
						}
						.info-box{
							margin: 12rpx 0 8rpx;
							.title{
								font-weight: 400;
								font-size: 28rpx;
								color: #333333;
								line-height: 40rpx;
								max-width: 250rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
							.able-btn{
								width: 98rpx;
								height: 34rpx;
								line-height: 34rpx;
								text-align: center;
								background: linear-gradient( 270deg, #FFFAD9 0%, #FFFB18 100%);
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								font-weight: 500;
								font-size: 24rpx;
								color: #FF7F08;
								line-height: 34rpx;
							}
						}
						.price-box{
							padding: 8rpx 10rpx;
							background: linear-gradient( 270deg, #D64334 0%, #ED7432 100%);
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							.price{
								font-size: 24rpx;
								color: #FFFFFF;
								line-height: 28rpx;
								margin-right: 18rpx;
							}
							.unit-box{
								flex: 1;
								padding: 8rpx 10rpx;
								text-align: center;
								background: #FFFFFF;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								font-weight: 500;
								font-size: 28rpx;
								line-height: 40rpx;
								color: #EB5A4B;
							}
						}
					}
				}
			}
			
			.show-goods-box{
				.show-goods-list{
					.show-goods-item{
						.imgs-box{
							position: relative;
							width: 710rpx;
							height: 296rpx;
							border-radius: 12rpx;
							image{
								width: 100%;
								height: 100%;
								border-radius: 12rpx;
							}
							.distance-box{
								position: absolute;
								left: 12rpx;
								bottom: 10rpx;
								padding: 12rpx 16rpx;
								background: rgba(0,0,0,0.58);
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								font-size: 24rpx;
								color: #FFFFFF;
							}
						}
						.content-box{
							position: relative;
							padding: 16rpx 20rpx;
							background: #FFF;
							.title{
								margin: 16rpx 0 8rpx;
								font-weight: 500;
								font-size: 30rpx;
								color: #333333;
								line-height: 40rpx;
							}
							.intro{
								font-size: 24rpx;
								color: #999999;
								line-height: 36rpx;
							}
							.num-box{
								margin-top: 10rpx;
								font-size: 20rpx;
								color: #999999;
								line-height: 28rpx;
								.price-box{
									font-weight: 700;
									font-size: 48rpx;
									color: #FF7125;
									line-height: 32rpx;
									.unit{
										margin-left: 8rpx;
										font-size: 28rpx;
									}
								}
								.subsidy-box{
									margin-left: 24rpx;
									padding: 8rpx 16rpx;
									font-size: 20rpx;
									color: #CC760C;
									line-height: 28rpx;
									background: rgba(255,197,82,0.3);
									border-radius: 8rpx 8rpx 8rpx 8rpx;
								}
							}
							.exchange-box{
								position: absolute;
								right: 20rpx;
								bottom: 12rpx;
								width: 114rpx;
								height: 92rpx;
								text-align: center;
								background-size: 100% 100%;
								color: #FFF;
								font-size: 24rpx;
								padding: 18rpx 0 0 0;
								line-height: 30rpx;
							}
							.gain-box{
								position: absolute;
								right: 20rpx;
								bottom: 12rpx;
								width: 136rpx;
								height: 54rpx;
								text-align: center;
								background-size: 100% 100%;
								color: #FFF;
								font-size: 24rpx;
								padding: 22rpx 0 0 16rpx;
								line-height: 28rpx;
							}
						}
					}
				}
			}
			
            .information {
                height: 76rpx;
                box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.06);
                padding: 0 20rpx;
                box-sizing: border-box;
                border-radius: 14rpx;

                .news {
                    position: relative;

                    .shade {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        z-index: 100;
                    }
                }

                .icon-toutiao {
                    width: 114rpx;
                    height: 34rpx;
                }

                .gap-line {
                    height: 28rpx;
                    width: 1px;
                    background-color: #dcdddc;
                    margin: 0 30rpx;
                }
            }

            .special-area {
                .item {
                    width: 300rpx;
                    border-radius: 20rpx;
                    display: inline-block;
                    overflow: hidden;
                    margin-right: 20rpx;

                    .title {
                        padding: 10rpx 0;
                    }

                    .desc {
                        background-color: #fee9eb;
                        padding: 6rpx 20rpx;
                        border-radius: 60rpx;
                        max-width: 260rpx;
                    }
                }
            }

            .activity-header {
                height: 90rpx;
                padding: 0 20rpx;
            }

            .seckill {
                .dec {
                    background-color: #fffbdb;
                    width: 150rpx;
                }
            }

            .hot,
            .new-goods {
                .title-image {
                    width: 144rpx;
                    height: 55rpx;
                }
            }
        }

        .goods {
            .goods-title {
                height: 100rpx;

                .line {
                    width: 58rpx;
                    height: 1px;
                    background-color: #ccc;
                    margin: 0 22rpx;
                }

                .icon {
                    width: 38rpx;
                    height: 38rpx;
                }
            }
        }
    }

    .coupon-pop-container {
        width: 638rpx;
        height: 804rpx;
        background-size: 100% 100%;
        padding-top: 323rpx;

        .coupon-pop-lists {
            .coupon-pop-item {
                width: 488rpx;
                height: 150rpx;
                background-size: 100% 100%;
                margin-top: 20rpx;

                .coupon-left {
                    width: 160rpx;
                    height: 100%;
                }

                .coupon-right {
                    padding-left: 30rpx;
                    border-left: 1rpx dashed $-color-primary;
                }
            }
        }
    }

    .coupons-popup {
        .wrap {
            position: relative;
            width: 638rpx;
            height: 803rpx;
            overflow: hidden;

            .coupon-bg {
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
            }

            .item {
                position: relative;
                width: 488rpx;
                height: 150rpx;
                margin: 0 auto 20rpx;
            }

            .img {
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 0;
            }

            .item-con {
                z-index: 10;
                position: relative;
                padding: 20rpx 0;
                height: 100%;
                box-sizing: border-box;

                .price {
                    width: 160rpx;
                    border-right: 1px dashed $-color-primary;
                    height: 100%;
                }
            }
        }

        .btn {
            width: 478rpx;
            height: 84rpx;
            margin: 20rpx auto;
            box-sizing: border-box;
            border: 3px solid #f8d07c;
        }
    }
}
</style>
